<template>
  <NewCard title="" :isright="true">
    <template slot="right">
      <el-button type="text" class="handleBtn" @click="condClick"
        >操作</el-button
      >
    </template>
    <!-- 项目条件 -->
    <div class="conditionsTxt">
      <h3>
        <p>编号</p>
        <p>条件</p>
      </h3>
      <el-collapse v-model="activeCriteria">
        <el-collapse-item
          :title="crit.group"
          :name="index"
          v-for="(crit, index) in criteria"
          :key="index"
        >
          <ul>
            <li v-for="(cont, index) in crit.children" :key="index">
              <i>{{ cont.no > 9 ? cont.no : "0" + cont.no }}</i>
              <p>{{ cont.name }}</p>
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 编辑项目条件 -->
    <el-drawer
      title="编辑条件"
      size="40%"
      @close="condClose"
      :visible.sync="conditionDrawer"
    >
      <div class="conditionsTxt pd20 drawerBox">
        <h3>
          <p>删除</p>
          <p>编号</p>
          <p>条件</p>
        </h3>
        <div class="mb60">
          <el-tree
            :allow-drop="canDrag"
            :data="criteria"
            @node-drop="handleDrop"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            draggable>
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <i
                class="el-icon-remove"
                v-if="data.isPid"
                @click="removeTjgroup(data)"
                v-hasPermi="['work:projectCondition:remove']"
              ></i>
              <i class="el-icon-remove" v-else @click="removeTjList(data)"></i>
              <p class="treeNum" v-if="!data.isPid">
                {{ data.no > 9 ? data.no : "0" + data.no }}
              </p>
              <el-input v-model="data.group" v-if="data.isPid" @input="editGroupInput(data)" class="groupInput"></el-input>
              <el-input v-model="data.name" v-else @input="editInput(data)"></el-input>
              <!-- 添加图标 -->
              <p class="drawerAdd" v-if="data.isPid">
                <svg-icon icon-class="add-icon" @click="addTjList(data)" v-hasPermi="['work:projectCondition:add']"/>
              </p>
            </span>
          </el-tree>

          <!-- <div
            class="drawerEdit"
            v-for="(crit, groupIndex) in criteria"
            :key="crit.id">
            <h4>
              <i class="el-icon-remove" @click="removeTjgroup(crit)"></i>
              <el-input v-model="crit.group"></el-input>
            </h4>
            <ul>
              <li v-for="(cont, index) in crit.children" :key="cont.id">
                <i class="el-icon-remove" @click="removeTjList(cont)"></i>
                <p>{{ "0" + cont.no }}</p>
                <el-input v-model="cont.name"></el-input>
              </li>
              <p class="drawerAdd"><i @click="addTjList(groupIndex)">+</i></p>
            </ul>
          </div> -->
        </div>
        <SubBtn v-hasPermi="['work:projectCondition:edit']">
          <template slot="btn">
            <el-button round @click="addTjGroup">添加条件组</el-button>
            <el-button type="primary" round @click="saveBtn" :disabled="!isCheck">保存</el-button>
          </template>
        </SubBtn>
      </div>
    </el-drawer>
  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";
import {switchTree} from "@/wss/utils/wss.js";
import { 
  getProjectConditionListApi,
  removeProjectConditionApi,
  addProjectConditionApi,
  editProjectConditionApi
} from "@/wss/newApi_3-24/work/projectCondition.js";
import debounce from "lodash/debounce";
export default {
  components: { NewCard, SubBtn },
  props: {
    cascaderValue: {
      type: Array,
    },
  },
  data() {
    return {
      //树形结构
      defaultProps: {
        children: "children",
        label: "group",
      },
      //当前激活的项目条件
      activeCriteria: [],
      // 编辑项目条件抽屉
      conditionDrawer: false,
      //判断当前的抽屉是点保存关闭还是普通关闭
      saveClose: false,
      isSend: false,//点击保存时判断当前的输入的是正确的数据

      temArray: [], //暂存的数组
      // 项目条件数据
      criteria: [],
      //项目类型id
      typeId: "",

      //当前删除的id组
      removeId:[],
      //当前添加的条件
      addTj:[],
      //修改项目条件
      editTj:[],

      isCheck: true,// 判断当前点击保存是否已经返回请求
    };
  },
  mounted() {
    //父组件通过$bus通知子组件重新获取数据
    // this.$bus.$on('getConditionList',()=>{
    //   this.getProjectConditionList() //获取项目条件
    // })

    // 默认展开所有折叠面板 activeStep
    this.criteria.forEach((item,i)=>{
      this.activeCriteria.push(i)
    })
  },
  watch: {
    cascaderValue(newValue, oldValue) {
      this.getProjectConditionList(); //获取项目条件
    },
  },
  methods: {
    // 拖拽时判定目标节点能否被放置
    canDrag(draggingNode, dropNode, type) {

      if (draggingNode.level == '1') {
        return false
      } else {
        if(draggingNode.level==dropNode.level){
          //组中只剩一个的时候不能拖拽
          if(draggingNode.parent.data.children.length==1){
            return false
          }else{
            return type==="prev" || type==="next"
          }
          //组中只剩一个的时候不能拖拽 end
        }else if(draggingNode.level==dropNode.level+1){
          return type==='inner'
        }else{
          return false
        }
      }
      
    },

    //拖拽成功完成时的事件 draggingNode拖拽节点 dropNode进入的节点 dropType放置位置 ev是event
    handleDrop(draggingNode, dropNode, dropType, ev) {
      // //修改拖拽后的group为目标节点的group
      draggingNode.data.group = dropNode.data.group

      // //判断修改的数据是否有重复的，删除重复的
      // this.editTj.forEach(item=>{
      //   // 获得下标
      //   let index = this.editTj.indexOf(item);
      //   if(item.id == draggingNode.data.id){
      //     this.editTj.splice(index,1)
      //   }
      // })
      // //获取修改后的项目条件
      // this.editTj.push(draggingNode.data)
      // 拖拽之后的数字no要改变 ************************
      let newStep = []
      //把所有子项转成一整个数组
      this.criteria.forEach(item=>{
        newStep = [...newStep,...item.children]
      })
      //把下标+1重新赋值给所有子项no
      for(let i=0;i<newStep.length;i++){
        newStep[i].no = (i+1)
      }
      // 把全部子项给到修改组里面
      newStep.forEach(item=>{
        // 有id才加进去
        if(item.id){
          this.editTj.push(item)
        }
      })
      // 拖拽之后的数字no要改变 ************************end
    },

    //获取项目条件
    async getProjectConditionList() {
      this.typeId = this.cascaderValue[this.cascaderValue.length - 1];
      let typeId = this.cascaderValue[this.cascaderValue.length - 1];
      let result = await getProjectConditionListApi({typeId});
      if (result.code == 200) {
        //根据no字段排序
        let arr = result.rows.sort((a, b) => Number(a.no)- Number(b.no))
        // 转换树形结构
        this.criteria = switchTree(arr);

        // 默认展开所有折叠面板 activeStep
        this.criteria.forEach((item,i)=>{
          this.activeCriteria.push(i)
        })
      }
    },

    //修改组的组名的时候，下面的子元素都要把组名改了
    editGroupInput(data){
      data.children.forEach((item)=>{
        item.group = data.group
      })
      // 去掉重复的
      data.children.map(item=>{ 
        this.editTj = this.editTj.filter(item2 => {
          return item2.id != item.id
        });
      })
      //把当前修改的添加到修改数据里面
      this.editTj = [...this.editTj,...data.children]
    },

    //修改input框的时候
    editInput(data){
      //判断修改的数据是否有重复的，删除重复的
      this.editTj.forEach(item=>{
        // 获得下标
        let index = this.editTj.indexOf(item);
        if(item.id == data.id){
          this.editTj.splice(index,1)
        }
      })
      //刚刚添加进去条件的不能当做修改的加入到修改组里面 通过createBy判断是否是刚刚加进去的
      if(data.createBy){
        //把当前修改的添加到修改数据里面
        this.editTj.push(data)
      }
    },

    // *****************项目条件****************
    //点击项目条件的操作
    condClick() {
      this.saveClose = false //改成普通关闭状态
      this.isSend = false //点击保存时判断当前的输入的是正确的数据
      //显示项目条件的抽屉
      this.conditionDrawer = true;
      // 把数组先保存起来,关闭抽屉和取消的时候还原旧数据
      this.temArray = JSON.parse(JSON.stringify(this.criteria));
    },

    // 关闭项目条件的回调
    condClose() {
      // 还原旧数据 普通关闭执行还原数据
      if(this.saveClose == false){
        this.criteria = this.temArray;
      }
      //清空删除、添加、修改的数据
      this.removeId=[]//当前删除的数据
      this.addTj=[]//当前添加的数据
      this.editTj=[]//修改项目的数据
    },

    //删除条件的其中一组
    removeTjgroup(group) {
      let criteria = this.criteria;
      if(group.id){
        // 当删除的这一条是有id的说明是已经添加的
        criteria = criteria.filter((item) => {
          return item.group != group.group;
        });
        this.criteria = criteria;
      }else{
        // 当删除的这一条是没有id的说明是新添加的
        criteria.forEach((i) => {
          let index = criteria.indexOf(group)
          if(i == group){
            criteria.splice(index,1)
          }
        })
      }

      //获得当前删除组下的所有的id
      group.children.forEach(i=>{
        this.removeId.push(i.id)
      })

      //删除刚刚添加的一条的时候，把添加数据里面的那一条删掉
      this.addTj.forEach(item=>{
        // 获得下标
        let index = this.addTj.indexOf(item);
        if(item == group){
          this.addTj.splice(index,1)
        }
      })

      // 添加之后的数字no要改变 ************************
      let newStep = []
      //把所有子项转成一整个数组
      this.criteria.forEach(item=>{
        newStep = [...newStep,...item.children]
      })
      //把下标+1重新赋值给所有子项no
      for(let i=0;i<newStep.length;i++){
        newStep[i].no = (i+1)
      }
      // 把全部子项给到修改组里面
      newStep.forEach(item=>{
        // 有id才加进去
        if(item.id){
          this.editTj.push(item)
        }
      })
      // 添加之后的数字no要改变 ************************end
    },

    // 删除条件的其中一条
    removeTjList(list) {
      let criteria = this.criteria;
      if(list.id){
        // 当删除的这一条是有id的说明是已经添加的
        criteria.forEach((i) => {
          i.children = i.children.filter((k) => {
            return k.id != list.id;
          });
        });
        this.criteria = criteria;
      }else{
        // 当删除的这一条是没有id的说明是新添加的
        criteria.forEach((i) => {
          i.children.forEach((k)=>{
            // 获得下标
            let index = i.children.indexOf(list)
            if(k == list){
              i.children.splice(index,1)
            }
          })
        })
      }

      //获得当前删除的id
      this.removeId.push(list.id)
      //删除刚刚添加的一条的时候，把添加数据里面的那一条删掉
      this.addTj.forEach(item=>{
        // 获得下标
        let index = this.addTj.indexOf(item);
        if(item == list){
          this.addTj.splice(index,1)
        }
      })

      // 添加之后的数字no要改变 ************************
      let newStep = []
      //把所有子项转成一整个数组
      this.criteria.forEach(item=>{
        newStep = [...newStep,...item.children]
      })
      //把下标+1重新赋值给所有子项no
      for(let i=0;i<newStep.length;i++){
        newStep[i].no = (i+1)
      }
      // 把全部子项给到修改组里面
      newStep.forEach(item=>{
        // 有id才加进去
        if(item.id){
          this.editTj.push(item)
        }
      })
      // 添加之后的数字no要改变 ************************end
    },

    //添加一条数据
    addTjList(data) {
      //把数据里的no提取出来
      let noList = [];
      this.criteria.forEach((item) => {
        if (item.no) {
          noList.push(parseInt(item.no));
        }
        if (item.children.length > 0) {
          item.children.forEach((c) => {
            if (c.no) {
              noList.push(parseInt(c.no));
            }
          });
        }
      });
      //获得最大的no 然后+1
      let maxNum = (parseInt(Math.max(...noList)) || 0) + 1;

      //添加一条数据
      data.children.push({
        group: data.group,
        name: "",
        no: maxNum.toString(),
        typeId: this.typeId,
      });

      //获得当前添加的这一个条件
      this.addTj.push(data.children[data.children.length-1])

      // 添加之后的数字no要改变 ************************
      let newStep = []
      //把所有子项转成一整个数组
      this.criteria.forEach(item=>{
        newStep = [...newStep,...item.children]
      })
      //把下标+1重新赋值给所有子项no
      for(let i=0;i<newStep.length;i++){
        newStep[i].no = (i+1)
      }
      // 把全部子项给到修改组里面
      newStep.forEach(item=>{
        // 有id才加进去
        if(item.id){
          this.editTj.push(item)
        }
      })
      // 添加之后的数字no要改变 ************************end
    },

    //添加一组数据
    addTjGroup() {
      this.criteria.push({
        children: [],
        group: "",
        isPid: true,
        typeId: this.typeId,
      });

      //获得当前添加的这一个组
      // this.addTj.push(this.criteria[this.criteria.length-1])
    },

    // 点击保存按钮 ***************
    saveBtn: debounce(function() {
      //判断点击保存时的数据是否是正常的数据
      try {
        //当把数据全部删除的情况
        if (this.criteria.length == 0) {
          // 条件改成通过
          this.isSend = true;
        }

        this.criteria.forEach((item) => {
          if (item.children.length < 1) {
            this.$message({
              type: "warning",
              message: "组下面至少要有一个条件！",
            });
            throw new Error("组下面至少要有一个条件！");
          } else {
            if (item.isPid == true && item.group == "") {
              this.$message({ type: "warning", message: "组名不能为空" });
              throw new Error("组名不能为空");
            } else {
              item.children.forEach((c) => {
                if (c.name == "") {
                  this.$message({ type: "warning", message: "条件名不能为空" });
                  throw new Error("条件名不能为空");
                }
              });
              // 条件改成通过
              this.isSend = true;
            }
          }
        });
        
      } catch (e) {
        throw e.message
      }
      this.startRequest()// 发起 删除、添加、修改
    },1000),
    // 点击保存按钮 ***************end

    //如果条件是通过就要去发请求 ********************************
    async startRequest(){
      this.isCheck = false //先不给点击保存
      // 发起 删除、添加、修改
      if (this.isSend == true) {
        this.$message({ type: "success", message: "正在编辑，请稍等！" });
        //判断添加条件是否有数据 有数据就发添加的请求
        if(this.addTj.length > 0){
          // 过滤删除children字段和isPid字段
          this.addTj.forEach(item=>{
            delete item.children
            delete item.isPid
          })
          // 发添加请求
          await this.addProjectCondition(this.addTj)
          this.addTj = []
        }
        //判断添加条件的id组是否有数据 end
        
        //判断修改条件是否有数据 有数据就发添加的请求
        if(this.editTj.length > 0){
          // 过滤删除children字段和isPid字段
          this.editTj.forEach(item=>{
            delete item.children
            delete item.isPid
          })
          // 把没有id的去掉
          let arr = this.editTj.filter(item=>{
            if(item.id){
              return item
            }
          })
          // 发修改请求
          await this.editProjectCondition(arr)
          this.editTj = []
        }
        //判断修改条件的组是否有数据 end

        //判断删除的id组是否有数据 有数据就发删除的请求
        if(this.removeId.length > 0){
          this.removeId.forEach(async id=>{
            // 发删除请求
            if(id){
              await this.removeProjectCondition(id)
              this.removeId = []
            }
          })
        }
        //判断删除的id组是否有数据 end

        setTimeout(async ()=>{
          await this.getProjectConditionList(); //获取项目条件
          this.saveClose = true //改成保存关闭状态
          this.conditionDrawer = false// 关闭抽屉
          this.isCheck = true //可以点击保存了
        },100)
        
      }
    },
      //如果条件是通过就要去发请求 ********************************end

    // *****************项目条件****************end

    //删除的接口
    async removeProjectCondition(id){
      let result = await removeProjectConditionApi(id)
      if(result.code==200){
        // 重新获取列表
        // this.getProjectConditionList(); //获取项目条件
      }
    },

    //添加项目条件
    async addProjectCondition(data){
      let result = await addProjectConditionApi(data)
      if(result.code==200){
        // 重新获取列表
        // this.getProjectConditionList(); //获取项目条件
      }
    },

    //修改项目条件
    async editProjectCondition(data){
      let result = await editProjectConditionApi(data)
      if(result.code==200){}
    }
  },
};
</script>

<style scoped>
ul,
h3,
h4,
p {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd20 {
  padding: 0 20px;
}
.mb60 {
  margin-bottom: 60px;
}
::v-deep .el-card__body {
  height: 100%;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .el-card__body > div::-webkit-scrollbar {
  width: 0;
}

.projectMate {
  height: 100%;
}
.projectMate .el-card {
  position: relative;
}

/* 抽屉样式 */
.conditionsTxt.drawerBox h3 {
  margin-top: 0;
}
::v-deep .mateEdit .el-drawer__header {
  border-bottom: 1px solid #efefef;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
::v-deep .mateEdit .el-drawer__header > span {
  font-size: 18px;
  font-weight: bold;
  color: #2e3f5e;
  padding-left: 20px;
  background: url("~@/wss/assets/image/icon/cardLeft.png") left center no-repeat;
  background-size: 7px;
}

.conditionsTxt.drawerBox h3 > p:nth-child(1),
.conditionsTxt.drawerBox h3 > p:nth-child(2) {
  width: 8%;
}
.conditionsTxt.drawerBox h3 > p:nth-child(2){
  text-align: center;
}

/* 需求 */
.demandDrawer.conditionsTxt h3 > p:nth-child(3) {
  width: 40%;
}
.demandDrawer.conditionsTxt .drawerEdit ul > li > .el-input:nth-child(3) {
  margin-right: 3%;
}
.demandDrawer.conditionsTxt .drawerEdit ul > li > .el-input {
  width: 40%;
}

/* 步骤 */
.stepDrawer.conditionsTxt h3 > p:nth-child(3) {
  width: 50%;
}
.stepDrawer.conditionsTxt h3 > p:nth-child(4),
.stepDrawer.conditionsTxt h3 > p:nth-child(5) {
  width: 15%;
}
.stepDrawer.conditionsTxt h3 > p:nth-child(5) {
  text-align: right;
}

.stepDrawer.conditionsTxt .drawerEdit ul > li > .el-input:nth-child(3) {
  width: 45%;
  margin-right: 5%;
}
.stepDrawer.conditionsTxt .drawerEdit ul > li > .el-input:nth-child(4),
.stepDrawer.conditionsTxt .drawerEdit ul > li > .el-input:nth-child(5) {
  width: 15%;
}
.stepDrawer.conditionsTxt .drawerEdit ul > li > .el-input:nth-child(5) {
  margin-left: 4%;
}
/* 抽屉样式 end*/

.drawerEdit h4 {
  display: flex;
  align-items: center;
  margin: 8px 0;
}
.drawerEdit i.el-icon-remove {
  width: 8%;
  color: #909aaa;
  font-size: 14px;
  cursor: pointer;
}

.conditionsTxt .drawerEdit ul > li {
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #ebeef5;
  border-bottom: 0;
}
.conditionsTxt .drawerEdit ul > li > p {
  width: 8%;
  text-align: center;
}
.conditionsTxt .drawerEdit ul > li > .el-input {
  width: 84%;
}
.drawerEdit .drawerAdd {
  padding: 15px 0;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}
.drawerEdit .drawerAdd i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  width: 12.5px;
  height: 12.5px;
  border: 1px solid #909aaa;
  color: #909aaa;
  margin-left: 11%;
  cursor: pointer;
}

/* 表格数据 */
.mateEdit {
  height: 90%;
}
.mateEdit .el-row {
  height: 100%;
}

/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px;
}
::v-deep .subBtn .el-button {
  width: 100px;
  padding: 8px 0;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn .el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}

/* 操作按钮 */
.handleBtn {
  color: #f87a23;
  font-size: 12px;
}

/* 项目条件 */
.conditionsTxt {
}
.conditionsTxt h3 {
  display: flex;
  font-size: 12px;
  font-weight: 600;
  color: #909aaa;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
  margin-top: 10px;
}
.conditionsTxt h3 > p:first-child {
  width: 12%;
}
.conditionsTxt h3 > p:nth-child(2) {
  width: 88%;
}

::v-deep .conditionsTxt .el-collapse-item__header,
::v-deep .conditionsTxt .el-collapse-item__header.focusing {
  font-size: 14px;
  font-weight: 600;
  color: #2e3f5e;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}
::v-deep .conditionsTxt .el-collapse-item__content {
  padding-bottom: 0;
}
::v-deep .conditionsTxt .el-icon-arrow-right:before {
  content: "\E790";
}
::v-deep .conditionsTxt .el-collapse-item__arrow.is-active {
  transform: rotate(180deg);
}

.conditionsTxt ul > li {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
  color: #2e3f5e;
}
.conditionsTxt ul > li i {
  display: block;
  width: 12%;
  font-style: normal;
}
.conditionsTxt ul > li p {
  width: 88%;
}
.conditionsTxt ul > li:last-child {
  border-bottom: 0;
}

/* 项目需求 */
.demandbox h3 > p:nth-child(2),
.demandbox h3 > p:nth-child(3) {
  width: 44%;
}

.demandbox ul > li p {
  width: 44%;
}

/* 流程步骤 */
.stepbox h3 > p:nth-child(2) {
  width: 50%;
}
.stepbox h3 > p:nth-child(3) {
  width: 22%;
}
.stepbox h3 > p:nth-child(4) {
  margin-left: auto;
}

.stepbox ul > li p.isLight {
  width: 50%;
  color: #f87a23;
  cursor: pointer;
}
.stepbox ul > li p:nth-child(3) {
  width: 28%;
}
.stepbox ul > li p:nth-child(4) {
  width: 10%;
}

/* 流程步骤的材料收集******************** */
/* 表格数据 */
.dataAcquisition {
  height: 95%;
  padding: 0 20px;
}
.dataAcquisition .el-row {
  height: 100%;
}

/* 添加材料 */
.bottomBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.bottomBtn .el-button {
  width: 100%;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  line-height: 25px;
  color: #606e84;
}
.bottomBtn .el-input {
  width: 100%;
}
::v-deep .bottomBtn .el-input .el-input__inner {
  height: 46px;
  line-height: 46px;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  text-align: center;
}

/* 上传 */
.expertRev .el-button {
  position: absolute;
  top: 10px;
  right: 20px;
  padding: 8px 10px;
  font-size: 13px;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload > img {
  max-width: 100%;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}

/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px;
}
::v-deep .subBtn .el-button {
  width: 100px;
  padding: 8px 0;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn .el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
::v-deep .subBtn .el-button--primary:hover{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}
/* 流程步骤的材料收集********************end */
</style>

<style scoped>
/* 树状结构样式 */
.el-tree >>> .el-tree-node {
  position: relative;
}
.el-tree >>> .el-tree-node__expand-icon {
  display: none;
}
.el-tree >>> .el-tree-node__content {
  width: 100%;
  height: auto;
  padding-left: 0 !important;
}
.el-tree .custom-tree-node {
  width: 100%;
  padding: 8px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid #f5f7fa;
  cursor: move;
}
.el-tree .el-icon-remove {
  width: 8%;
  color: #909aaa;
  cursor: pointer;
}
.el-tree .treeNum {
  width: 8%;
  text-align: center;
  font-size: 14px;
}
.el-tree .el-input {
  flex: 1;
}

.el-tree .el-input.groupInput{
  flex: none;
  width: 84%;
  margin-left: auto;
}

.el-tree .drawerAdd {
  width: 100%;
  position: absolute;
  bottom: 0px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f7fa;
}
.el-tree .drawerAdd > svg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #909aaa;
  margin-left: 10%;
  cursor: pointer;
}

.el-tree >>> .el-tree-node:focus > .el-tree-node__content,
.el-tree >>> .el-tree-node > .el-tree-node__content:hover {
  background-color: #fff;
}

::v-deep .el-tree > .el-tree-node > .el-tree-node__children {
  padding-bottom: 40px;
}
/* 树状结构样式 end */
</style>